<template>
    <NuxtLayout name="blank">
        <div style="height: 100vh;">
            <el-scrollbar>
                <div class="layout-container">
                    <template v-for="(item, index) in diyItems" :key="index">
                        <header-widget
                            v-if="item.type === 'header'"
                            :item-config="item.config"
                            :item-data="item.data"
                        />

                        <entrant-widget
                            v-if="item.type === 'entrant'"
                            :item-config="item.config"
                            :item-data="item.data"
                        />

                        <faculty-widget
                            v-if="item.type === 'faculty'"
                            :item-config="item.config"
                            :item-data="item.data"
                        />

                        <feature-widget
                            v-if="item.type === 'feature'"
                            :item-config="item.config"
                            :item-data="item.data"
                        />

                        <profile-widget
                            v-if="item.type === 'profile'"
                            :item-config="item.config"
                            :item-data="item.data"
                        />

                        <problem-widget
                            v-if="item.type === 'problem'"
                            :item-config="item.config"
                            :item-data="item.data"
                        />

                        <footer-widget
                            v-if="item.type === 'footer'"
                            :item-config="item.config"
                            :item-data="item.data"
                        />

                        <images-widget
                            v-if="item.type === 'images'"
                            :item-config="item.config"
                            :item-data="item.data"
                        />
                    </template>
                </div>
            </el-scrollbar>
        </div>
    </NuxtLayout>
</template>

<script setup lang="ts">
import { diyEnum } from '~/enums/app'
import useAppStore from '~/stores/app'
import EntrantWidget from './_components/entrant.vue'
import FacultyWidget from './_components/faculty.vue'
import FeatureWidget from './_components/feature.vue'
import ProfileWidget from './_components/profile.vue'
import ProblemWidget from './_components/problem.vue'
import HeaderWidget from './_components/header.vue'
import FooterWidget from './_components/footer.vue'
import ImagesWidget from './_components/images.vue'

const appStore = useAppStore()
const diyItems = ref<any[]>([])

onMounted(async () => {
    const data = await appStore.getDiy(diyEnum.HOME)
    diyItems.value = data.items
})
</script>

<style scoped lang="scss">
.layout-container {
    box-sizing: border-box;
    min-width: 1200px;
    height: 100%;
    min-height: 100vh;
    background: linear-gradient(#dee7fb, #e2e6fb, #f2f5f9, #f5f7f9);
}
</style>
